@media  screen and (max-width: 750px){
  .content-container{width: 100vw;}
}

@media  screen and (max-width: 1200px) and (min-width: 750px){
  .content-container{width: 96vw;}
}

@media screen and (max-width: 1500px) and (min-width: 1200px){
  .content-container{width: 90vw;}
}
@media screen and (min-width: 1500px){
  .content-container { width: 80vw; max-width: 1500px; }
}

@for $i from 1 through 20 {
  .mt-#{$i} {margin-top: $i * 1px}
  .mb-#{$i} {margin-bottom: $i * 1px}
  .ml-#{$i} {margin-left: $i * 1px}
  .mr-#{$i} {margin-right: $i * 1px}

  .mt-#{$i*10} {margin-top: $i * 10px}
  .mb-#{$i*10} {margin-bottom: $i * 10px}
  .ml-#{$i*10} {margin-left: $i * 10px}
  .mr-#{$i*10} {margin-right: $i * 10px}
}

.content-container{
  margin:auto;
}

.flex {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.flex-column { flex-direction: column;}
.flex-strength { align-items: stretch;}

.flex-1{flex: 1;}
.flex-2{flex: 2;}

.float-left{ float: left; }
.float-right{ float: right; }

.font-color-yellow{
  color: $color-yellow;
}

.font-color-title {
  color: #555;
}

.font-color-content{
  color: #1a1a1a;
}

.font-color-note{
  color: #555;
}
